<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="web前端个人简历,web前端,前端工程师">
    <meta name="description" content="TQ.web前端个人简历">
    <title>求职中——web前端工程师简历</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/fullpage.min.css">
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/jquery-1.12.2.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/fullpage.js"></script>
    
</head>

<body>
    <!-- 1.load加载  2.nav切换  3.音乐播放 -->
    <!-- loading -->
    <div class="loading">
        <div class="loader">
            <div>L</div>
            <div>O</div>
            <div>A</div>
            <div>D</div>
            <div>I</div>
            <div>N</div>
            <div>G</div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--brand start-->
    <div class="brand">
        <img src="./images/logo.png" alt="">
        <span>TQ.resume</span>
    </div>
    <!--brand end-->
    <!-- nav -->
    <div class="nav">
        <div class="burger">
            <div class="burger-line1"></div>
            <div class="burger-line2"></div>
            <div class="burger-line3"></div>
        </div>
        <ul id="myMenu" class="nav-list">
            <li data-menuanchor="secondPage" class="active"><a href="#secondPage">关于我</a></li>
            <li data-menuanchor="thirdPage"><a href="#thirdPage">前端技能</a></li>
            <li data-menuanchor="fourthPage"><a href="#fourthPage">工作经历</a></li>
            <li data-menuanchor="fourthPage"><a href="#fivePage">我的作品</a></li>
            <li data-menuanchor="lastPage"><a href="#lastPage">联系我</a></li>
        </ul>
    </div>
    <!-- phone nav -->
    <div class="phone-nav">
        <h3 class="navtitle">TQ.resume</h3>
        <a href="javascript:;" class="phoneicon">
            <img src="./images/phone.png" alt="">
        </a>
        <ul id="myMenu" class="nav-list">
            <li data-menuanchor="firstPage" class="active"><a href="#firstPage">首页</a></li>
            <li data-menuanchor="secondPage"><a href="#secondPage">关于我</a></li>
            <li data-menuanchor="thirdPage"><a href="#thirdPage">前端技能</a></li>
            <li data-menuanchor="fourthPage"><a href="#fourthPage">工作经历</a></li>
            <li data-menuanchor="fourthPage"><a href="#fivePage">我的作品</a></li>
            <li data-menuanchor="lastPage"><a href="#lastPage">联系我</a></li>
        </ul>
    </div>
    <!-- music -->
    <div class="music-container" id="music-container">
        <div class="music-info">
            <h4 id="music-title"></h4>
            <div class="progress-container" id="progress-container">
                <div class="progress" id="progress"></div>
            </div>
        </div>
    
        <audio src="music/summer.mp3" id="audio"></audio>
        <div class="img-container">
            <img src="images/summer.jpg" alt="music-cover" id="cover" />
        </div>
        <div class="navigation">
            <button id="prev" class="action-btn">
                <i class="iconfont icon-icon_on_the_left"></i>
            </button>
            <button id="play" class="action-btn action-btn-big">
                <i class="iconfont icon-qp_icon_play"></i>
            </button>
            <button id="next" class="action-btn">
                <i class="iconfont icon-icon_on_the_right"></i>
            </button>
        </div>
    </div>
    <div id="fullpage">
        <div class="section section1">
            <div class="mask">
                <!-- 旋转的球 -->
                <div id="circle-box">
                    <div class="circle-row circle-row1">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="circle-row circle-row2">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="circle-row circle-row3">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                </div>
            </div>
            <div class="desc">
                <h2>Hi,I am TQ</h2>
                <p>一名自学前端技术人</p>
                <p></p>
            </div>
            
        </div>
        <div class="section section2">
            <div class="mask"></div>
            <div class="container">
                <div class="head_title">
                    <h3>关于我</h3>
                    <p class="enwords">
                        <span>ABOUT ME</span>
                    </p>
                </div>
                <div class="content">
                    <p>对于前端开发怀有强烈的兴趣，有着坚实的前端开发基础，并且一直保持对新技术的学习热情。不浮躁，做事认真，学习能力棒棒哒!</p>
                    <p>熟练运用html+css来制作符合W3C规范，兼容主流浏览器的页面，可以独立建站。
                    可以使用原生JS开发，熟悉ES6新特性，熟悉jQuery、Bootstrap框架。
                    能够使用rem以及弹性盒实现移动端适配，使用swiper ,betterscroll，原生JS等实现移动端效果。
                    熟练使用vue.js框架，结合组件库进行项目的编写和开发</p>
                </div>
                <div class="icon">
                    <ul class="clearfix">
                        <li>
                            <a>
                                <i class="iconfont icon-gerenxinxi"></i>
                            </a>
                            <p><span>姓名 唐琦</span></p>
                            <p><span>年龄 24</span></p>
                        </li>
                        <li>
                            <a>
                                <i class="iconfont icon-xueli"></i>
                            </a>
                            <p><span>学历 大专</span></p>
                            <p class="enduskill"><span>专业 通信技术</span></p>
                        </li>
                        <li>
                            <a>
                                <i class="iconfont icon-ditu"></i>
                            </a>
                            <p><span>坐标 成都</span></p>
                        </li>
                        <li>
                            <a>
                                <i class="iconfont icon-shalou"></i>
                            </a>
                            <p><span>求职中</span></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="section section3">
            <div class="mask">
            </div>
            <div class="head_title test">
                <h3>前端技能</h3>
                <p class="enwords">
                    <span>WEB SKILL</span>
                </p>
            </div>
            <div class="main">
                <div class="skill">
                    <ul class="skill-list">
                        <li>
                            <div class="skill-box">
                                <div class="show">
                                    <a href="javascript:;">
                                        <img src="./images/HTML5.png" alt="">
                                    </a>
                                    <p>HTML</p>
                                </div>
                                <div class="hide">
                                    <p>深刻理解web标准</p>
                                    <p>熟练运用html标签</p>
                                    <p>熟悉HTML盒模型和各类布局方式、能够根据设计图实现页面布局和交互效果</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-box">
                                <div class="show">
                                    <a href="javascript:;">
                                        <img src="./images/icon-css3 .png" alt="">
                                    </a>
                                    <P>CSS</P>
                                </div>
                                <div class="txt hide">
                                    <p>熟练运用css及css3新属性</p>
                                    <p>掌握css3动画属性，打造酷炫的页面</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-box">
                                <div class="show">
                                    <a href="javascript:;">
                                        <img src="./images/js.png" alt="">
                                    </a>
                                    <P>JavaScript</P>
                                </div>
                                <div class="txt hide">
                                    <p>能编写基本的原生JS组件</p>
                                    <p>理解原型、作用域和this</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-box">
                                <div class="show">
                                    <a href="javascript:;">
                                        <img src="./images/jquery.png" alt="">
                                    </a>
                                    <p>JQuery</p>
                                </div>
                                <div class="txt hide">
                                    <p>熟悉 jQuery 的常用 API</p>
                                    <p>熟悉jQuery的常用属性和方法，能够封装jQuery</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-box">
                                <div class="show">
                                    <a href="javascript:;">
                                        <img src="./images/vue.png" alt="">
                                    </a>
                                    <p>VUE</p>
                                </div>
                                <div class="txt hide">
                                    <p>熟悉模块组件化</p>
                                    <p>熟悉vue-cli,vue-router,vuex等的使用</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-box">
                                <div class="show">
                                    <a href="javascript:;">
                                        <img src="./images/bootstrap.png" alt="">
                                    </a>
                                    <p>BOOTSTARP</p>
                                </div>
                                <div class="txt hide">
                                    <p>熟悉BootStrap框架，能够使用其设计响应式网页</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-box">
                                <div class="show">
                                    <a href="javascript:;">
                                        <img src="./images/git.png" alt="">
                                    </a>
                                    <p>GIT</p>
                                </div>
                                <div class="txt hide">
                                    <p>熟悉并能够使用git管理代码</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-box">
                                <div class="show">
                                    <a href="javascript:;">
                                        <img src="./images/webpack.png" alt="">
                                    </a>
                                    <p>WEBPACK</p>
                                </div>
                                <div class="txt hide">
                                    <p>熟悉webpack相关配置及基本操作</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-box">
                                <div class="show">
                                    <a href="javascript:;">
                                        <img src="./images/wx.png" alt="">
                                    </a>
                                    <p>微信小程序</p>
                                </div>
                                <div class="txt hide">
                                    <p>熟悉微信web开发者工具，微信小程序开发流程、API</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-box">
                                <div class="show">
                                    <a href="javascript:;">
                                        <img src="./images/node.png" alt="">
                                    </a>
                                    <p>NODE</p>
                                </div>
                                <div class="txt hide">
                                    <p>熟悉node.js基本用法及express，能够完成简单服务器搭建，实现动态页面</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="phone-skill">
                    <ul class="skill-desc">
                    <li>熟练使用HTML5、DIV+CSS、CSS3、JavaScript，能够完成网页静态布局，开发兼容主流浏览器的页面</li>
                    <li>熟练使用jQuery框架，实现页面的交互效果，提高用户体验</li>
                    <li>熟悉BootStrap，vue.js等主流框架</li>
                    <li>熟练使用前端css集成工具less,sass,stylus</li>
                    <li>熟悉http协议，熟悉ajax、axios等http请求技术</li>
                    <li>熟悉移动端web开发,掌握盒模型、flex、各种尺寸屏幕的响应式布局</li>
                    <li>熟练使用微信web开发者工具，熟悉微信小程序开发流程、API</li>
                    <li>熟悉webpack相关配置及基本操作</li>
                    <li>熟练使用Photoshop进行切图及基本的ps操作</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="section section4">
            <div class="mask">
            </div>
            <div class="head_title test">
                <h3>工作经历</h3>
                <p class="enwords">
                    <span>WORK EXPERIENCE</span>
                </p>
            </div>
            <div class="main work-main">
                <div class="work">
                    <div class="tree-nav">
                        <div class="year-tag mhide">
                            2020年7月
                        </div>
                    </div>
                    <div class="work-desc">
                        <div class="item">
                            <p class="company-name">成都蓝鲸互动有限公司</p>
                            <p class="position">技术部--前端工程师</p>	
                            <div class="txt">
                                <p>
                                    1.根据项目需求开发项目前端页面，利用HTML、CSS高度还原psd效果图，并适应主流浏览器（包括pc和手机端）
                                </p>    
                                <p>2.使用JavaScript、jQuery、Swiper实现页面特效，利用Ajax与后台联调进行数据对接。</p> 
                                <p>3.使用git团队协作开发工具，进行资源管理</p>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section section5">
            <div class="mask">
            </div>
            <div class="head_title test">
                <h3>我的作品</h3>
                <p class="enwords">
                    <span>MY DEMO</span>
                </p>
            </div>
            <div class="main mhide">
                <div class="demo ">
                    <div class="demo_item active">
                        <ul>
                            <li>
                                <a href="http://tq07.gitee.io/vue-food" target="_blank">
                                    <div class="demo-bg">
                                        <div class="demo-inner">
                                            <img src="./images/vue-food.jpg" alt=""  title="vue项目（外卖业务）">
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="javascript">
                                    <div class="demo-bg">
                                        <div class="demo-inner">
                                            <img src="./images/first.jpg" alt="" title="微信小程序">
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div  class="demo_item">
                        <ul>
                            <li>
                                <a href=" http://tq07.gitee.io/vue-goodsapp" target="_blank">
                                    <div class="demo-bg">
                                        <div class="demo-inner">
                                            <img src="./images/vue-goods.jpg" alt="" title="vue项目——购物街">
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href=" http://tq07.gitee.io/echarts" target="_blank">
                                    <div class="demo-bg">
                                        <div class="demo-inner">
                                            <img src="./images/echarts.jpg" alt="" title="数据可视化">
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div  class="demo_item">
                        <ul>
                            <li>
                                <a href=" http://x-qidian.com/" target="_blank">
                                    <div class="demo-bg">
                                        <div class="demo-inner">
                                            <img src="./images/xqd.png" alt="" title="深圳新奇点官网（响应式）">
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="http://yingchuangwx.com/" target="_blank">
                                    <div class="demo-bg">
                                        <div class="demo-inner">
                                            <img src="./images/ycwx.png" alt="" title="萤窗文学官网（响应式）">
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div  class="demo_item">
                        <ul>
                            <li>
                                <a href="http://sf.tj.gov.cn/" target="_blank">
                                    <div class="demo-bg">
                                        <div class="demo-inner">
                                            <img src="./images/tj-web.png" alt="" title="天津政府类网站项目（pc+ moblie）">
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="https://gitee.com/tq07/uni-app" target="_blank">
                                    <div class="demo-bg">
                                        <div class="demo-inner">
                                            <img src="./images/uni.jpg" alt="" title="基于uni-app微信小程序应用">
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- <div  class="demo_item">
                        <ul>
                            <li>
                                <a href="https://sherlockkid7.github.io/wjs/" target="_blank">
                                    <div class="demo-bg">
                                        <div class="demo-inner">
                                            <img src="./images/wjs.jpg" alt="" title="微金所">
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="https://gitee.com/tq07/uni-app" target="_blank">
                                    <div class="demo-bg">
                                        <div class="demo-inner">
                                            <img src="./images/uni.jpg" alt="" title="基于uni-app微信小程序应用">
                                        </div>
                                    </div>
                                </a>
                            </li>
    
                        </ul>
                    </div> -->
                </div>
                <div class="demo-icon ">
                    <a class="demo-num active" href="javascript:;" data-index="0">1</a>
                    <a class="demo-num" href="javascript:;" data-index="1">2</a>
                    <a class="demo-num" href="javascript:;" data-index="2">3</a>
                    <a class="demo-num" href="javascript:;" data-index="3">4</a>
                    <!-- <a class="demo-num" href="javascript:;" data-index="4">5</a> -->
                </div>
            </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                        <a class="swiper-slide" href="http://tq07.gitee.io/vue-food" target="_blank">
                            <span class="swiper-desc">vue项目（外卖业务）</span>
                        </a>
                        <a class="swiper-slide" href="http://tq07.gitee.io/vue-goodsapp" target="_blank">
                            <span class="swiper-desc">vue项目——购物街</span>
                        </a>
                        <a class="swiper-slide" href="http://tq07.gitee.io/echarts" target="_blank">
                            <span class="swiper-desc">数据可视化</span>
                        </a>
                        <a href="javascript:;" class="swiper-slide">
                            <span class="swiper-desc">微信小程序</span>
                        </a>
                        <a href=" http://x-qidian.com/" class="swiper-slide" target="_blank">
                            <span class="swiper-desc">深圳新奇点官网</span>
                        </a>
                        <a href="http://yingchuangwx.com/" class="swiper-slide" target="_blank">
                            <span class="swiper-desc">萤窗文学官网</span>
                        </a>
                        <a class="swiper-slide" href="http://sf.tj.gov.cn/" target="_blank">
                            <span class="swiper-desc">天津政府类网站项目</span>
                        </a>
                        <a class="swiper-slide" href="javascript:;">
                            <span class="swiper-desc">个人简历</span>
                        </a>
                        <a class="swiper-slide" href="https://gitee.com/tq07/uni-app" target="_blank">
                            <span class="swiper-desc">基于uni-app微信小程序应用</span>
                        </a>
                </div>
            </div>
        </div>
        <div class="section section6">
            <div class="mask">
            </div>
            <div class="head_title test">
                <h3>联系我</h3>
                <p class="enwords">
                    <span>CONTACT ME</span>
                </p>
            </div>
            <div class="main">
                <div class="contact-box">
                    <div class="contact-row contact-title">
                        <span class="s1">灵感</span>
                        <span class="s2">代码</span>
                        <span class="s3">梦想</span>
                        <span class="s4">未来</span>
                    </div>
                    <div class="contact-row contact-text">
                        <p>学习是一个充实愉悦的过程</p>
                        <p>喜欢尝试，期待新鲜事物</p>
                        <p>前端即兴趣，兴趣即未来</p>
                        <p>行路有良友，便是捷径</p>
                        <p>期待有机会与您共事！</p>
                    </div>
                    <div class="contact-row contact-icon">
                        <a>
                            <i class="iconfont icon-weixin"></i>
                            <div class="icon-tips weixin-tips hidden">
                                <img src="./images/weixin.png" alt="">
                            </div>
                            
                        </a>
                        <a>
                            <i class="iconfont icon-qq"></i>
                            <div class="icon-tips qq-tips hidden">
                                <img src="./images/qq.png" alt="">
                            </div>
                        </a>
                        <a href="https://github.com/sherlockkid7" target="_blank">
                            <i class="iconfont icon-github"></i>
                            <span class="icon-tips git-tips hidden">githup</span>
                        </a>
                        <a href="./glowworm.html" target="_blank">
                            <!-- <i class="iconfont icon-github"></i> -->
                            <span class="icon-tips git-tips hidden">萤火虫</span>
                        </a>    
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入自己的js -->
    <script src="./js/main.js"></script>
</body>

</html>